<script setup lang="jsx">
import { computed } from "vue"
import * as ElementPlusIconsVue from "@element-plus/icons-vue"

const emit = defineEmits(["update:modelValue"])
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
})
const selectedIcon = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit("update:modelValue", val)
  },
})
const chooseIcon = name => {
  selectedIcon.value = name
}
</script>

<template>
  <div class="select-icon-wrapper">
    <el-popover
      :width="930"
      teleported
      popper-class="popper-class-select-icon-wrapper"
      tirgger="click"
    >
      <template #reference>
        <el-input
          placeholder="请选择"
          v-model="selectedIcon"
          clearable
          filterable
        ></el-input>
      </template>
      <el-space :size="2" wrap class="select-icon-item-wrapper">
        <div
          :class="['select-icon-item', { active: selectedIcon === item }]"
          @click="chooseIcon(item)"
          v-for="(item, index) of Object.keys(ElementPlusIconsVue)"
          :key="index"
        >
          <el-icon class="el-icon--right" :size="24">
            <component :is="ElementPlusIconsVue[item]" />
          </el-icon>
          <span class="name">{{ item }}</span>
        </div>
      </el-space>
    </el-popover>
  </div>
</template>

<style lang="less">
.popper-class-select-icon-wrapper {
  .select-icon-item-wrapper {
    max-height: 450px;
    overflow: auto;
  }
  .select-icon-item {
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;

    &:hover {
      background: var(--el-color-primary-light-10);
    }

    &.active {
      background: var(--el-color-primary-light-10);
    }

    .name {
      font-size: 12px;
      scale: 0.6;
    }
  }
}
</style>
<style scoped>
.select-icon-wrapper {
  width: 100%;
}
</style>
